<!-- -->
<template>
  <div class="app-container" style="height:calc(100vh - 220px);">
    <el-card class="neiBox" v-loading="loading">
      <div class="titleDiv">AI数据分析</div>
      <div style="height: 37%; margin-top:10px">
        <el-table v-loading="loading" :data="tableData" ref="tableData" height="100%" stripe border>
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column align="center" type="index" label="索引" width="60px" />
          <el-table-column v-for="item in fields" :align="item.align || 'left'" :prop="item.code.split(':')[1]" :label="item.val" :min-width="item.width + 'px'">
            <template #default="{ row }">
              <span v-if="item.code.split(':')[1] === 'saleForecast'">
                <b style="font-weight:normal;" :class="row.saleForecast !== '-' ? 'colorRed':''">{{ row.saleForecast }}</b>
              </span>
              <span v-else-if="item.code.split(':')[1] === 'forecastRate'">
                <b style="font-weight:normal;" :class="row.forecastRate !== '-' ? 'colorRed':''">{{ row.forecastRate }}</b>
              </span>
              <span v-else>{{ row[item.code.split(':')[1]] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row style="height: calc(63% - 27px); margin-top:10px">
        <el-col :span="14" style="height: 100%;">
          <div style="height: 100%;">
            <div id="macLine" class="allWidthHeight" />
          </div>
          <!-- <div class="kuanBox">
            <el-input type="textarea" :rows="2" v-model.trim="input" @keyup.enter.native="hideCursor"></el-input>
          </div>-->
        </el-col>
        <el-col :span="10" style="height: 100%;">
          <div class="questionBox">
            <ul>
              <li class="questionLi">
                <span>
                  <i class="el-icon-question" />
                </span>
                <p class="kuanBox">
                  <el-input type="textarea" :rows="2" v-model.trim="input" @keyup.enter.native="hideCursor"></el-input>
                </p>
              </li>
              <li class="answerLi">
                <span>
                  <i class="iconfont icon-badian" />
                </span>
                <p class="kuanBox">
                  <el-input type="textarea" :rows="2" v-model.trim="tera" @keyup.enter.native="hideCursor"></el-input>
                </p>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  components: {},
  props: {
    fields: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      tableData: [],
      myChart: null,
      input: '',
      loading: false,
      tera: ''
    }
  },
  mounted() {},

  methods: {
    hideCursor() {
      document.activeElement.blur() // 使当前聚焦元素失去焦点，从而隐藏输入光标
    },
    /**
     * @description: page
     * @param {*} page
     * @return {*}
     */
    async getTableInfo() {
      this.getTable()
      this.loading = true
      setTimeout(async () => {
        const res = await this.$axios.post('/sale/operation/marketChart')
        if (res?.data.code === 200) {
          this.loading = false
          let colors = {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#00d386' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#0076fc' // 100% 处的颜色
              }
            ],
            globalCoord: false // 缺省为 false
          }
          let colorList = []
          let obj = {
            time: [],
            num: [],
            nums: [],
            bleans: []
          }
          res.data.data.forEach((item) => {
            if (item.isForecast === true) {
              colorList.push('#FA5251')
            } else {
              colorList.push(colors)
            }
            obj.time.push(item.monthStr)
            obj.num.push(item.dataStr)
            obj.nums.push(item.forecastStr)
            obj.bleans = colorList
          })
          console.log(obj)
          this.setEqLine(obj)
        }
      }, 500)
    },
    async getTable() {
      this.loading = true
      const res = await this.$axios.post('/sale/operation/marketListTab')
      if (res?.data.code === 200) {
        this.tableData = res.data.data
        setTimeout(() => {
          this.loading = false
        }, 100)
      } else {
        this.loading = false
      }
    },
    infoSize() {
      this.myChart.resize()
    },
    setEqLine(data) {
      const option = {
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['分析预测值'],
          x: 'right'
        },
        xAxis: {
          type: 'category',
          data: data.time,
          splitLine: { show: false },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            // 坐标轴 轴线
            lineStyle: {
              color: '#666',
              width: 1,
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            color: '#666',
            formatter: '{value}'
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            data: data.num,
            type: 'bar',
            barWidth: '50%',
            itemStyle: {
              color: function (params) {
                return data.bleans[params.dataIndex]
              },
              borderRadius: 10
            },
            label: {
              show: true,
              color: '#333',
              position: 'top',
              fontSize: 16
            }
          },
          {
            name: '分析预测值',
            data: data.nums,
            type: 'line',
            label: {
              show: true,
              position: 'bottom',
              fontWeight: 'bold',
              fontSize: 16
            }
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('macLine'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang='scss'>
.neiBox {
  height: 100%;
}
.neiBox .el-card__body {
  height: 100% !important;
}
.titleDiv {
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}
.kuanBox {
  height: 100%;
  // margin-top: 10px;
  .el-textarea {
    height: 100%;
    .el-textarea__inner {
      height: calc(100% - 1px);
      border: 1px solid #ccc;
      font-size: 14px;
      // text-align: center;
      border-radius: 15px;
      resize: none; // 去除右下角图标
      overflow: hidden;
      padding: 5px;
    }
  }
}
.questionBox {
  height: 100%;
  ul {
    padding: 0 0 0 10px;
    overflow: hidden;
    margin: 0;
    height: 100%;
    li {
      list-style: none;
      span {
        width: 25px;
        float: left;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 10px;
        border: 1px solid #ccc;
        background: #1891ff;
        margin-right: 5px;
        i {
          color: #fff;
        }
      }
      p {
        width: calc(100% - 30px);
        float: left;
        margin: 0;
      }
    }
    .questionLi {
      height: 65px;
      font-size: 14px;
      margin-bottom: 10px;
      i {
        font-size: 16px;
      }
      p {
        overflow: hidden; /* 隐藏超出部分的内容 */
        text-overflow: ellipsis; /* 在文本末尾添加省略号 */
        display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
        -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
        -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式*/
      }
    }
    .answerLi {
      height: calc(100% - 80px);
      p {
        font-size: 14px;
        line-height: 20px;
        height: 100%;
        overflow-y: auto; /* 隐藏超出部分的内容 */
        // white-space: nowrap; /* 禁止文本换行 */
        text-overflow: ellipsis; /* 在文本末尾添加省略号 */
      }
    }
  }
}
</style>
